<!--添加菜单的form表单
    添加菜单分两种情况一种情况是添加一级菜单，则必须填写菜单路径
    另一种是添加二级菜单，二级菜单的路径继承了一级菜单，因此不需要进行二次录入。
    为避免误操作因此添加二级菜单时需要将菜单路径文本框隐藏将值赋为一级菜单的菜单路径
-->
<template>
  <div class="sys-menu-form-dialog">
    <el-dialog :title="formTitle" v-model="visible" height="700px" width="400px" :close-on-click-modal=false
      @close="dialogClose">
      <div style="margin: 10px">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign" :rules="formRules" ref="sys_menu_form">
          <el-form-item label="菜单名称" prop="label">
            <el-input v-model="formLabelAlign.label"></el-input>
          </el-form-item>
          <el-form-item v-show="showPathField" label="菜单路径" prop="path">
            <el-input v-model="formLabelAlign.path"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer">
        <el-button @click="submit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "SysMenuFormDialog",
  methods: {
    showDialog(menuId, nodeMenuPath) {
      this.visible = true;
      this.formLabelAlign.parentId = menuId;
      this.formLabelAlign.sysMenuType = this.$parent.sysMenuType;
      this.formLabelAlign.path = "";
      if (nodeMenuPath) this.formLabelAlign.path = nodeMenuPath;
      this.showPathField = nodeMenuPath ? false : true;//判断是否为二级菜单如果是则不需要定义菜单路径，并且对文本框进行隐藏
    },
    submit() {
      let me = this;
      let sysMenuForm = me.$refs.sys_menu_form;
      sysMenuForm.validate((valid) => {//对必须填写的信息一定要进行验证
        if (!valid) return false;
        me.formLabelAlign.actionType = "sysMenuAdd";
        me.$post("/sysMenu", me.formLabelAlign, function (response) {
          let resault = response.success;
          if (resault) {
            me.visible = false;
            me.$message.success("添加菜单成功");
            me.$emit("getTreeData");//添加完成后直接调用父级组件的getTreeData()方法更新数据，
          } else {
            me.$message.error(response.message);
          }
        });
      });
    },
    dialogClose() {
      this.$refs.sys_menu_form.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
    }
  },
  mounted() {
  },
  data() {
    return {
      visible: false,
      formTitle: "title",
      formLabelAlign: {
        parentId: 0,
        label: "",
        sysMenuType: null,
        path: "",
        actionType: ""
      },
      formRules: {
        label: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 2, message: "长度在2个或2个字符以上", trigger: "blur" }
        ],
        path: [
          { required: true, message: "请输入菜单路径", trigger: "blur" },
          { min: 3, message: "长度在3个字符以上", trigger: "blur" }
        ]
      },
      showPathField: true
    };
  }
};
</script>

<style lang="scss"></style>
